<template>
	<div
		class="h-12 px-1 rounded flex flex-col justify-center items-center cursor-pointer app-bg-react"
		:class="isSelect ? 'bg-primary' : 'bg-bg-3'"
		@click="onSelect">
		<betting-name
			class="w-full text-[12px] leading-[16px] app-font-bold"
			:class="isSelect ? 'text-white-500' : 'text-t-2'"
			:betslipLine="selection.betslipLine"
			:points="selection.points"
			:side="selection.side"
			:marketTypeCate="market.marketTypeCate"
			:id="selection.id"
			:animated="animated" />
		<div class="mt-[2px] h-[18px]" :class="isSelect ? 'text-white' : 'text-t-1'">
			<base-icon v-if="isLock" name="privacy" class="lock-icon"></base-icon>
			<betting-odds-animate v-else :value="selection.displayOdds" :trend="selection.trend" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { BaseIcon } from '@/components/base'
import BettingName from '../betting-name/index.vue'
import BettingOddsAnimate from '../betting-odds-animate/index.vue'
import { Selection, Market, Match, BetslipItemStatus } from '@/types'
import { useBetslipStore } from '@/store'
import { isBettingLock } from '@/utils'
import { BettingMethod } from '@/enums'

const props = defineProps({
	match: {
		type: Object as PropType<Match>,
		required: true
	},
	market: {
		type: Object as PropType<Market>,
		required: true
	},
	selection: {
		type: Object as PropType<Selection>,
		required: true
	},
	animated: {
		type: Boolean,
		default: false
	}
})

const useBetslip = useBetslipStore()

const isLock = computed(() => isBettingLock(props.match, props.market, props.selection))

const isSelect = computed(() => useBetslip.isInBetslip(props.selection.id))

const onSelect = (e: MouseEvent) => {
	useBetslip.select(
		{
			id: props.selection.id,
			marketId: props.market.marketId,
			eventId: props.match.eventId,
			amount: 0,
			status: BetslipItemStatus.none,
			type: BettingMethod.single
		},
		(e.target as HTMLElement).getBoundingClientRect()
	)
}
</script>
